<template>
  <div>
    <div v-if="!(list.length)"></div>
    <div v-else>
      <h3>{{ nub+1 }}# {{ list[nub].title }} - 序号{{ list[nub].id }} <span
          v-if="!isExam"
          @click="drawer=true"
        >?</span></h3>
      <el-checkbox-group v-model="list[nub].usersAnswers">
        <el-checkbox
          style="display:block;fontSize:16px"
          v-for="(item,index) in list[nub].options"
          :key="index"
          :label="item.index"
        >
          {{ item.index +")  "+ item.value }}</el-checkbox>
      </el-checkbox-group>
      <div class="btns">
        <el-button
          type="success"
          v-show="!(nub==0)"
          @click.stop="remNub"
        >上一个</el-button>
        <el-button
          type="success"
          @click.stop="addNub"
        >{{ (nub+1)==50? "提交试卷" : "下一个"}}</el-button>
      </div>

      <!-- 抽屉 -->
      <el-drawer
        title="答案提示："
        :visible.sync="drawer"
        :append-to-body="true"
        :modal-append-to-body="true"
        style="position:fixed;"
      >
        <span>{{list[nub].tips}}</span>
      </el-drawer>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    nub: {
      type: Number,
      required: true,
    },
    list: {
      type: Array,
      required: true,
    },
    addNub: {
      type: Function,
      required: true,
    },
    remNub: {
      type: Function,
      required: true,
    },
    isExam: {
      type: Boolean,
      required: true,
    },
  },
  data() {
    return {
      drawer: false,
    };
  },
  methods: {},
};
</script>

<style scoped>
h3 > span {
  display: inline-block;
  width: 16px;
  height: 16px;
  background-color: black;
  color: white;
  border-radius: 100%;
  text-align: center;
  line-height: 16px;
  font-size: 14px;
  cursor: help;
}

.btns {
  margin: 26px 0;
}

.btns > button {
  margin: 0 12px;
}
</style>